<template>
  <div class="studio-guest-view column justify-center items-center">
    <q-icon name="img:/icons/video-audio-link-white.svg" size="98px" />
    <h5 style="padding: 10px 0px; margin: 10px 0px">
      {{ $t('studio.guest.title') }}
    </h5>
    <div class="q-mb-md">{{ $t('studio.guest.subtitle') }}</div>
    <div class="row">
      <q-btn
        flat
        icon="account_circle"
        color="white"
        @click="openLoginDialog"
        no-caps
        v-close-popup
        >{{ $t('common.signin') }}</q-btn
      >
      <q-btn
        rounded
        color="accent"
        @click="openRegisterDialog"
        no-caps
        v-close-popup
        >{{ $t('common.createAccount') }}</q-btn
      >
    </div>
    <q-btn
      class="q-my-md"
      dense
      v-close-popup
      flat
      :label="t('studio.guest.backButton')"
      color="accent"
      no-caps
    />
  </div>
</template>
<script setup lang="ts">
import { useGlobalStore } from 'src/stores/global-store';

const globalStore = useGlobalStore();
function openRegisterDialog() {
  globalStore.showSignupDialog = true;
}
function openLoginDialog() {
  globalStore.showSigninDialog = true;
}
</script>
<style lang="scss" scoped>
.studio-guest-view {
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(6px);
}
</style>
